<template>
  <div class="app-container">
    <div class="custom_card_0" v-show="showSearch">
      <el-form
        :model="queryParams"
        size="small"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >

        <el-form-item label="加油日期">
          <el-date-picker clearable size="small" v-model="refuelingTime" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>

        <el-form-item label1 label="加油车辆" prop="carNo">
          <el-input
            v-model="queryParams.carNo"
            placeholder="加油车辆筛选"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label1 label="加油人" prop="oiler">
          <el-input
            v-model="queryParams.oiler"
            placeholder="加油人筛选"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item  label="使用油卡" prop="cardNo">
          <el-input
            v-model="queryParams.cardNo"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="custom_card">
      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <el-button
            class="first-plain-btn" size="medium"
            icon="el-icon-plus"
            @click="handleAdd"
            v-hasPermi="['refueling:record:add']"
            >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button class="sec-plain-btn" size="medium"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="handleExport"
            v-hasPermi="['refueling:record:export']"
            >导出
          </el-button>
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="recordList" border>
        <el-table-column
          label="加油时间"
          align="center"
          prop="refuelingDate"
          min-width="160"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="加油车辆"
          align="center"
          prop="carNo"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.carNo || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="使用油卡"
          align="center"
          prop="cardNo"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.cardNo || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="加油金额"
          align="center"
          prop="refuelingAmount"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            ¥{{ scope.row.refuelingAmount }}
          </template>
        </el-table-column>
        <el-table-column
          label="加油前公里数"
          align="center"
          prop="kilometers"
          min-width="160"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="加油前油量"
          align="center"
          prop="oilVolume"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.oilVolume || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.remark || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="加油人"
          align="center"
          prop="oiler"
          min-width="160"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          fixed="left"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="handleDetail(scope.row)"
              v-hasPermi="['refueling:record:edit']"
              >查看
            </el-button>
            <el-button
              size="small"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['refueling:record:edit']"
              >修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 添加或修改加油记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="editForm"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车牌号" required>
              <div @click="showCarBox = true">
                <el-input
                  v-model="form.carNo"
                  placeholder="请选择车辆"
                  clearable
                  :style="{ width: '100%' }"
                  readonly
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                  ></el-button>
                </el-input>
              </div>

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="加油人" prop="oiler">
              <el-input v-model="form.oiler" placeholder="请输入加油人" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 58px; overflow: hidden">
            <el-form-item label="加油时间" prop="refuelingDate">
              <el-date-picker
                clearable
                size="small"
                v-model="form.refuelingDate"
                type="datetime"
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                placeholder="选择加油时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 58px; overflow: hidden">
            <el-form-item label="是否使用油卡" prop="refuelingDate">
              <el-radio-group v-model="form.isUseCard">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.isUseCard==1">
            <el-form-item label="使用油卡" prop="oilCardId">
              <el-select
                v-model="form.oilCardId"
                placeholder="请选择使用油卡"
                clearable
                filterable
                remote
                class="el-input-style"
                @change="checkCard"
                style="width: 100%"
              >
                <el-option
                  v-for="item in cardList"
                  :key="item.id"
                  :label="item.cardNo"
                  :value="parseInt(item.id)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加油金额" prop="refuelingAmount">
              <el-input
                v-model="form.refuelingAmount"
                placeholder="请输入加油金额"
                @keyup.native="
                  form.refuelingAmount = oninput(form.refuelingAmount, 2)
                "
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加油前公里数" prop="kilometers">
              <el-input
                v-model="form.kilometers"
                placeholder="请输入加油前公里数"
                @keyup.native="form.kilometers = oninput(form.kilometers, 2)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加油前油量" prop="oilVolume">
              <el-input
                v-model="form.oilVolume"
                placeholder="请输入加油前油量"

              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark" :rows="4">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="加油前油表照片">
              <imageUpload
                v-model="form.photoOfBefore"
                v-bind:limit="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加油后油表照片">
              <imageUpload
                v-model="form.photoOfAfter"
                v-bind:limit="1"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="加油小票">
              <imageUpload
                v-model="form.refuelingTicket"
                v-bind:limit="1"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      <select-car v-model="showCarBox" @success="selectCarInfo"></select-car>
    </el-dialog>

    <!-- 添加或修改加油记录对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="openDetail"
      width="800px"
      append-to-body
    >
      <el-row>
        <el-col :sm="24" :md="24" :lg="24" class="table-padding">
          <el-descriptions :column="2" border :labelStyle="{ width: '120px' }">
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 车牌号</template>
              {{ form.carNo }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 加油时间</template>
              {{ form.refuelingDate }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 加油人</template>
              {{ form.oiler }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 加油金额</template>
              ¥{{ form.refuelingAmount }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 使用油卡</template>
              {{ form.cardNo || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 加油前公里数</template>
              {{ form.kilometers }}Km
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 加油前油量</template>
              {{ form.oilVolume }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 备注</template>
              {{ form.remark }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">加油前油表照片</template>
              <el-image
                v-if="form.photoOfBefore"
                :src="getImgUrl(form.photoOfBefore)"
                :preview-src-list="[getImgUrl(form.photoOfBefore)]"
                fit="contain"
                style="width: 120px"
              ></el-image>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">加油后油表照片</template>
              <el-image
                v-if="form.photoOfAfter"
                :src="getImgUrl(form.photoOfAfter)"
                :preview-src-list="[getImgUrl(form.photoOfAfter)]"
                fit="contain"
                style="width: 120px"
              ></el-image>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">加油小票</template>
              <el-image
                v-if="form.refuelingTicket"
                :src="getImgUrl(form.refuelingTicket)"
                :preview-src-list="[getImgUrl(form.refuelingTicket)]"
                fit="contain"
                style="width: 120px"
              ></el-image>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRecord,
  getRecord,
  delRecord,
  addRecord,
  updateRecord,
  exportRecord,
} from '@/api/car/refuelingRecord'
import MmvTitle from '@/components/MmvUI/MmvTitle'
import selectCar from '@/views/components/selectCar'
import { getAllOilCard } from '@/api/car/oilCard'

export default {
  name: 'Record',
  components: {
    MmvTitle,
    selectCar,
  },
  data() {
    var checkPrice = function (rule, val, callback) {
      if (!val) {
        return callback(new Error('不能为空'))
      }
      var reg = /^\d+(\.{0,1}\d{1,2}){0,1}$/
      if (!reg.test(val)) {
        return callback(new Error('请输入数字,至多两位小数'))
      }
      return callback()
    }
    return {
      showCarBox: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 加油记录表格数据
      recordList: [],
      cardList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      openDetail: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carId: null,
        kilometers: null,
        refuelingAmount: null,
        oilCardId: null,
        oiler: null,
        refuelingTicket: null,
        photoOfBefore: null,
        photoOfAfter: null,
        tenantId: null,
        refuelingStartDate: null,//加油日期筛选开始时间
        refuelingEndDate:null,//加油日期筛选结束时间
        cardNo:null,//使用油卡
      },
      refuelingTime:[],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        refuelingDate: [
          {
            required: true,
            message: '加油时间不能为空',
            trigger: 'blur',
          },
        ],
        carNo: [
          {
            required: true,
            message: '车牌号不能为空',
            trigger: ['change', 'blur'],
          }
        ],
        oilCardId: [
          {
            required: true,
            message: '使用油卡不能为空',
            trigger: 'change',
          },
        ],
        kilometers: [
          {
            required: true,
            message: '加油前公里数不能为空',
            trigger: 'blur',
          },
          {
            validator: checkPrice,
            trigger: ['change', 'blur'],
          },
        ],
        oilVolume: [
          {
            required: true,
            message: '加油前油量不能为空',
            trigger: 'blur',
          }
        ],
        refuelingAmount: [
          {
            required: true,
            message: '加油金额不能为空',
            trigger: 'blur',
          },
          {
            validator: checkPrice,
            trigger: ['change', 'blur'],
          },
        ],
        oiler: [
          {
            required: true,
            message: '加油人不能为空',
            trigger: 'blur',
          },
        ],
        remark: [
          {
            required: true,
            message: '备注不能为空',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.getList()
    getAllOilCard({ isAvailable: 1 }).then((response) => {
      this.cardList = response.data
    })
  },
  methods: {
    checkCard(id) {
      this.form.cardNo = this.cardList.map((item) => {
        if (item.id == id) {
          return item.cardNo
        }
      })[0]

      this.form.cardNo = this.cardList.filter((item) => {
        if (item.id == this.form.oilCardId) {
          return item.cardNo
        }
      })[0].cardNo
    },
    selectCarInfo(car) {

      if (car) {
        this.form.carId = car.carId
        this.form.carNo = car.carNo
      }
      this.showCarBox = false
    },
    /** 查询加油记录列表 */
    getList() {
      this.loading = true
      listRecord(this.queryParams).then((response) => {
        this.recordList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.openDetail = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        refuelingDate: null,
        carId: null,
        kilometers: null,
        refuelingAmount: null,
        oilCardId: null,
        delFlag: null,
        refuelingTicket: null,
        photoOfBefore: null,
        createBy: null,
        createTime: null,
        photoOfAfter: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        tenantId: null,
        oilVolume:null,
        isUseCard:1,
        oiler:this.$store.state.user.name
      },
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.refuelingStartDate = this.refuelingTime[0];
      this.queryParams.refuelingEndDate = this.refuelingTime[1];
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.refuelingTime = [];
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加加油记录'
    },
    /** 查看 */
    handleDetail(row) {
      this.reset()
      const id = row.id || this.ids
      getRecord(id).then((response) => {
        this.form = response.data
        this.openDetail = true
        this.title = '加油记录详情'
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getRecord(id).then((response) => {
        this.form = response.data
        if(!this.form.oilCardId || this.form.oilCardId==''){
          this.$set(this.form, 'isUseCard', 0);
        }else  {
          this.$set(this.form, 'isUseCard', 1);
        }
        this.open = true
        this.title = '修改加油记录'
      })
    },
    /** 提交按钮 */
    submitForm() {

      if (this.form.carNo == '' || this.form.carNo == null){
       this.$message({message:'车牌号不能为空', type:'error'})
       return
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateRecord(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addRecord(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal
        .confirm('是否确认删除加油记录编号为"' + ids + '"的数据项？')
        .then(function () {
          return delRecord(ids)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal
        .confirm('是否确认导出所有加油记录数据项？')
        .then(() => {
          this.exportLoading = true
          return exportRecord(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {})
    },
  },
}
</script>

<!--<style scoped="scoped">-->
<!--/deep/ .editForm .el-col-12 .el-input__inner {-->
<!--  width: 300px;-->
<!--}-->
<!--/deep/ .editForm .el-col-12 .el-form-item__content {-->
<!--  width: 300px;-->
<!--}-->

<!--</style>-->
